<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>balloon</title>
    <style>
        body{
            margin: 0px;
            height: 100vh;
            /*弹性布局 项目位于容器的中心*/
            display: flex;
            align-items: center;
            justify-content: center;

            background: linear-gradient(deepskyblue,skyblue,lightblue 20%);
        }

        .balloon{
            width: 12em;
            height: 19em;
            font-size: 16px;
            display: flex;
            /*列显示*/
            flex-direction: column;
            /*位于容器中心*/
            align-items: center;
        }
        /*定义伞盖*/
        .envelope{
            position: relative;
            width: inherit;
            height: 16em;
            /*border: 5px solid blue  ;*/
            /*隐藏超出容器外部的部分*/
            overflow: hidden;
        }
        /*绘制伞上端圆形*/
        .envelope span{

            position: absolute;
            width: inherit;
            height: 12em;
            border-radius: 50%;
            color: orange;
            /*currentColor表示继承字体color的颜色*/
            background-color: currentColor;
        }
        /*利用伪元素插入，border法绘制三角形*/
        .envelope span::before{
            content:'';
            position: absolute;
            width: 0;
            height: 0;
            border-width: 10em 5.5em 0em 5.5em;
            border-style: solid;
            border-color: currentColor transparent transparent transparent;
            top: 8.45em;
            left: calc(50% - 5.5em);
        }

        .envelope span:nth-child(2){
            /*通过设置 X 轴的值来定义缩放转换。*/
            transform: scaleX(0.4);
            /*图像滤波处理，提亮和调整对比度*/
            filter: brightness(0.85) contrast(1.4);
        }

        .basket{
            position: relative;
            width: 2em;
            height: 3em;
        }

        .basket::before{
            content: "";
            position: absolute;
            width: inherit;
            height: 1.6em;
            background-color: peru;
            bottom: 0;
            border-radius: 0 0 0.5em 0.5em;
            /*border: 2px solid blue;*/
        }

        .basket::after{
            content: "";
            position: absolute;
            width: 105%;
            height: 0.3em;
            background-color: saddlebrown;
            left: calc((100% - 105%)/2);
            top : 1.3em;
            border-radius: 0.3em;
        }

        .basket span{
            position: absolute;
            width: 0.1em;
            height: 1.5em;
            background-color: burlywood;

            left: calc((var(--n) - 1) * 0.6em);
            transform-origin: bottom ;
            transform: rotate(calc(var(--r) * 7deg));
        }

        .basket span:nth-child(1){
            --n:1;--r:-2;
        }
        .basket span:nth-child(2){
            --n:2;--r:-1;
        }
        .basket span:nth-child(3){
            --n:3;--r:1;
        }
        .basket span:nth-child(4){
            --n:4;--r:2;
        }

        .balloon{
            animation: drift 2s infinite alternate;
        }
        /*定义浮动动画*/
        @keyframes drift{
            to{
                transform: translateY(-5%);
            }
        }
    </style>
</head>
<body>
    <figure class = "balloon">
        <!--<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。!&ndash;&gt;-->
        <div class="envelope">
            <span></span>
            <span></span>
        </div>
        <div class="basket">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </figure>
</body>
</html>